<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <meta name="keywords" content="关键字台">
    <meta name="description" content="描述"> 
    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">   
</head>

<body class="gray-bg">
    
    <div class="row wrapper border-bottom white-bg page-heading">
		<div class="col-lg-9">
			<h2>二维码模版管理</h2>
		</div>
	</div>

	<div style="height: 1500px;">
		<hr>
		<div class="col-lg-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<p>
						<button class="btn btn-primary" onclick="showHbInit();">
							<i class="fa fa fa-plus"></i>&nbsp;新增配置
						</button>
					</p>
					<table
						class="table table-striped table-bordered table-hover dataTables-example"
						id="tb">
						<thead>
							<tr>
								<th>模版名称</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach var="s" items="${list }">
								<tr>
									<td>${s.name }</td>
									<td>
										<button onclick="selectInfo('${s.name}');return false;"
											class="btn btn-success ">查看</button>
										<button onclick="delAd('${s.name}');return false;"
											class="btn btn-danger ">删除</button>
										<button onclick="selectInfo1('${s.name}');return false;"
											class="btn btn-warning ">修改</button>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
    
    <!-- 修改红包配置modal -->
	<div class="modal fade" id="upModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<form id="updateInfo" name="updateInfo">
						<table class="table">
							<thead>
								<tr>
									<th>金额(元)</th>
									<th>占比(%)</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="hb_tbody2">
							</tbody>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
					<button type="button" onclick="submitUpForm()"
						class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 删除红包配置modal -->
	<div class="modal fade" id="delModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertDel">确定删除该条信息吗？</div>
				<div class="modal-footer">
					<input type="hidden" id="adIdDel" />
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" onclick="deledAd()" class="btn btn-primary"
						id="delBtn">删除</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 删除红包配置modal -->
	<div class="modal fade" id="delModal2" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertDel">确定删除该条信息吗？</div>
				<div class="modal-footer">
					<input type="hidden" id="hbModelIdDel" />
					<input type="hidden" id="hbModeltr">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" onclick="deledHbModel()" class="btn btn-primary"
						id="delBtn">删除</button>
				</div>
			</div>
		</div>
	</div>



	<!-- 添加红包配置modal -->
	<div class="modal inmodal in" id="myModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated fadeIn">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h2 class="modal-title">添加红包模版配置</h2>
				</div>
				<div class="modal-body">
					<form id="addQrcodeTemp" name="addQrcode">
						<input type="hidden" class="form-control" name="partenKey" id="partenKey" value="${max }" />
						模版名称:<input type="text" name="name" id="name" />
						<table class="table">
							<thead>
								<tr>
									<th>金额(元)</th>
									<th>占比(%)</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="hb_tbody">
								<tr>
									<td><input type="text" class="form-control" id="money" name="money" value=""></td>
									<td><input type="text" class="form-control" id="rate" name="rate"></td>
									<td><button onclick="delRow(this);return false;" class="btn btn-danger">删除</button></td>
								</tr>
							</tbody>
						</table>
					</form>
					<button onclick="keepAdd();return false;" class="btn btn-success">继续添加</button>
				</div>
				<div class="modal-footer">
					<button class="btn btn-white" data-dismiss="modal">取消</button>
					<button onclick="submitForm();return false;"
						class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>


	<!-- 查询红包配置 -->
	<div class="modal inmodal in" id="selModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated fadeIn">
				<div class="modal-header">
					<table class="table">
						<thead>
							<tr>
								<th>金额(元)</th>
								<th>占比(%)</th>
							</tr>
						</thead>
						<tbody id="hb_tbody1">
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
 
    
    
    
    <!-- 全局js -->
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="${ctx}/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${ctx}/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
	<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="${ctx}/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx}/js/qrcode/Math.uuid.js"></script>
    <script src="${ctx}/js/common.js"></script>
   	<script type="text/javascript">
	//定义只能输入两位小数的validate验证
	jQuery.validator.addMethod("towDot", function(value, element) {
		var bool = true;
		if (!isNaN(value)) {
			var dot = value.indexOf(".");
			if (dot != -1) {
				var dotCnt = value.substring(dot + 1, value.length);
				if (dotCnt.length > 2) {
					bool = false;
				}
			}
		}
		return bool;
	}, "只能输入两位小数");
	$(function() {
		
		$("#idEnd1").change(function(){
			var end = $("#idEnd1").val();
			var begin = $("#idBegin1").val();
			if(end!=null&&end!=""&&begin!=null&&begin!=""){
				if(parseInt(end)<parseInt(begin)){
					alert("结束编号必须大于起始编号");
				}
				$("#number1").val(end-begin+1);
			}
		})
		
		$("#idBegin1").change(function(){
			var end = $("#idEnd1").val().trim();
			var begin = $("#idBegin1").val().trim();
			if(end!=null&&end!=""&&begin!=null&&begin!=""){
				if(parseInt(end)<parseInt(begin)){
					alert("结束编号必须大于起始编号");
				}
				$("#number1").val(end-begin+1);
			}
		})
		
		
		 $('.dataTables-example').dataTable({
				"oLanguage" : { // 汉化
					"sProcessing" : "正在加载数据...",
					"sLengthMenu" : "_MENU_记录/页 ",
					"sZeroRecords" : "没有您要搜索的内容",
					"sInfo" : "_START_ 至 _END_  ，共 _TOTAL_ 项",
					"sInfoEmpty" : "记录数为0",
					"sInfoFiltered" : "(全部记录数 _MAX_  条)",
					"sInfoPostFix" : "",
					"sSearch" : "查找&nbsp;&nbsp;",
					"sUrl" : "",
					"oPaginate" : {
						"sFirst" : "第一页",
						"sPrevious" : " 上一页 ",
						"sNext" : " 下一页 ",
						"sLast" : " 最后一页 "
					}
				}
			})

		//红包配置添加验证
		$("#addQrcodeTemp").validate({
			debug : false,
			rules : {
				name : {
					required : true,
					maxlength : 10
				},
				money : {
					required : true,
					number:true,
					min : 1,
					max : 4999,
					towDot : true,
					maxlength : 10
				},
				rate : {
					required : true,
					number:true,
					min : 0,
					towDot : true,
					max : 100
				},
			},
			messages : {
				name : {
					required : "请输入模版名称",
					maxlength : 10
				},
				money : {
					required : "请输入起始金额",
					number:"请输入数字",
					min : "红包发送金额最低为1元",
					max : "红包发送金额最高为4999元",
					towDot : "只能输入两位小数",
					maxlength : "最大长度为10"
				},
				rate : {
					required : "请输入占比",
					number:"请输入数字",
					min : "数量最小值为0",
					towDot : "只能输入两位小数",
					max : "数量最大为100"
				}
			}
		});
		
		//红包配置添加验证
		$("#updateInfo").validate({
			debug : false,
			rules : {
				money : {
					required : true,
					number:true,
					min : 1,
					max : 4999,
					towDot : true,
					maxlength : 10
				},
				rate : {
					required : true,
					number:true,
					min : 0,
					towDot : true,
					max : 100
				},
			},
			messages : {
				money : {
					required : "请输入起始金额",
					number:"请输入数字",
					min : "红包发送金额最低为1元",
					max : "红包发送金额最高为4999元",
					towDot : "只能输入两位小数",
					maxlength : "最大长度为10"
				},
				rate : {
					required : "请输入占比",
					number:"请输入数字",
					towDot : "只能输入两位小数",
					min : "数量最小值为0",
					max : "数量最大为100"
				}
			}
		});
		
	})
	
	//判断是否为正整数
	function checkNumber(str){
		var reg = /^\+?[1-9][0-9]*$/;
		return reg.test(str);
	}
	
	//判断是否为浮点数
	function checkRate(str){
		var reg = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
		return reg.test(str);
	}
	
	/* function changeProcessbar(degree){
		var thisWidth= $("#progress-bar").css("width");
		var parentWidth = $("#progress-bar").parent().css("width");
		var nowDegree= parseInt(thisWidth)*100/parseInt(parentWidth)+"%";
		
		var widthNum =parseInt( (nowDegree.split("%"))[0]);
		var width = degree+widthNum;
		if(width<=90){
			$("#progress-bar").css("width",width+"%");
		}
	} */
	 

	
	function submitForm() {
		if($("#addQrcodeTemp").valid()){
			var trnode =$("#hb_tbody>tr");
			if(trnode.length==0){
				layer.msg("至少需要配置一条模板信息");
			}else{
				if(!checkInput()){
					return;
				}
				$("#myModal").modal("hide");
				var inte;
				$.ajax({
					url : "insertQrcodeModel",
					type : "POST",
					async:true,
					data : $('#addQrcodeTemp').serialize(),
					dateType : "text",
					success : function(data) {
						layer.msg(data.message);
						if (data.state==1) {
							window.setTimeout("window.location.reload()",1000);
						}
					}
				});
			}
		}
	}
	
	function selectInfo(id){
		$.ajax({
			url : "selectModeInfo",
			type : "POST",
			data : {id:id},
			dateType : "text",
			success : function(data) {
				var dt = data.data;
				$("#hb_tbody1").html("");
				for(var p in dt){
					keepAdd1(dt[p].money/100,dt[p].rate);
				}
				$("#selModal").modal('show');
			}
		});
	}
	
	function upValid(id,val){
		$.ajax({
			url : "upValid",
			type : "POST",
			data : {id:id,val:val},
			dateType : "text",
			success : function(data) {
				window.location.reload();
			}
		});
	}

	function clickBatch(monthBatch, level) {
		if ("" == monthBatch) {
			monthBatch = $("#monthBatch").val();
		}
		if ("" == level) {
			level = $("#level").val();
		}
		window.location.href = "winningInit?monthBatch=" + monthBatch
				+ "&level=" + level;
	}

	function delAd(id) {
		$("#delModal").modal("show");
		$("#adIdDel").val(id);
		return false;
	}
	

	function deledAd() {
		var id = $("#adIdDel").val();
		$.ajax({
			url : "deleteQrcodeModel",
			data : {
				id : id
			},
			type : "POST",
			dateType : 'text',
			success : function(data) {
				layer.msg(data.message);
				if(data.state==1){
					$('#'+id).remove();
					$("#delModal").modal('hide');
					window.location.reload();					
				}
			}
		});
	}
	function delHbModel(id){
		
		layer.confirm('确认删除该模板条目?',{
			btn: ['确定','取消'],
			closeBtn: 0
		},function(){
			$.ajax({
				url : "deleteHbModel",
				data : {
					id : id
				},
				type : "POST",
				dateType : 'text',
				success : function(data) {
					layer.msg(data.message);
					if(data.state==1){
						$("#tr"+id).remove();
					}
				}
			});			
		})
	
	}
	function deledHbModel(){
		var id = $("#hbModelIdDel").val();
		$.ajax({
			url : "deleteHbModel",
			data : {
				id : id
			},
			type : "POST",
			dateType : 'text',
			success : function(data) {
				layer.msg(data.mseeage);
				if(data.state==1){
					$('#'+id).remove();					
				}
			}
		});
	}
	function forbidAll(flag) {
		var monthBatch = $("#hiddenMB").val();
		$.ajax({
			url : "forbidAll",
			data : {
				"monthBatch" : monthBatch,
				"flag" : flag
			},
			type : "POST",
			dateType : 'text',
			success : function(data) {
				window.location.reload();
			}
		});
	}


	function showHbInit() {
 		$("#myModal").modal('show');
	}
	
	function addSetting(){
		$("#setting_area").fadeIn();
	}

	function submitUpForm(){
		if(!$("#updateInfo").valid()){
			return ;
		}
		if(!checkInput1()){
			return;
		}
		if($("#hb_tbody2>tr").length==0){
			layer.msg("清空模板消息请返回模板列表直接删除模板即可");
		}else{
			$("#upModal").modal('hide');
			if($("#updateInfo").valid()){
				var inte;
				$.ajax({
					url : "updateModelInfo",
					data : $('#updateInfo').serialize(),
					dateType : "text",
					success : function(data) {
						layer.msg(data.message);
						if (data.state==1) {
							window.setTimeout("window.location.reload()",1000);
						}
					}
				});
			}
		}
		
	}
	
	function selectInfo1(id){
		$.ajax({
			url : "selectModeInfo",
			type : "POST",
			data : {id:id},
			dateType : "text",
			success : function(data) {
				var dt = data.data;
				$("#hb_tbody2").html("");
				for(var p in dt){
					keepAdd2(dt[p].id,dt[p].money/100,dt[p].rate,id);
				}
				$("#upModal").modal('show');
			}
		});
	}
	
	function keepAdd2(id,money,rate,key){
		var hbBody = $("#hb_tbody2");
		var addDom = ('<tr id="tr'+id+'">\
	          <td><div><input type="text" class="form-control" id="money" name="money" value="'+money+'"></div></td>\
			  <td><input type="text" class="form-control" id="rate" name="rate" value="'+rate+'">\
			  <input type = "hidden" name="id" value="'+id+'">\
			  <input type = "hidden" name="key" value="'+key+'">\
			  <td><button onclick="delHbModel('+id+');return false;" class="btn btn-danger">删除</button></td>\
        </tr>');
		hbBody.append(addDom);
	}
	function keepAdd1(money,number){
		var hbBody = $("#hb_tbody1");
		var addDom = ('<tr>\
	          <td><div><input type="text" disabled="disabled" class="form-control" id="money" name="money" value="'+money+'"></div></td>\
			  <td><input type="text" disabled="disabled" class="form-control" id="rate" name="rate" value="'+number+'"></td>\
			  </tr>');
		hbBody.append(addDom);
	}
	function keepAdd(){
		if(!$("#addQrcodeTemp").valid()){
			return ;
		}
		if(!checkInput()){
			return;
		}
		var hbBody = $("#hb_tbody");
		var addDom = ('<tr>\
	          <td><div><input type="text" class="form-control" id="money" name="money" ></div></td>\
			  <td><input type="number" class="form-control" id="rate" name="rate" ></td>\
			  <td><button onclick="delRow(this);return false;" class="btn btn-danger">删除</button></td>\
        </tr>');
		hbBody.append(addDom);
	}
	
	function checkInput(){		
		var length = $("#addQrcodeTemp input[name='money']").length;
		var count = 0;
		for(var i=0;i<length;i++){
			var money = $("#addQrcodeTemp input[name='money']")[i].value;
			var rate = $("#addQrcodeTemp input[name='rate']")[i].value;
			if(checkIsEmpty(money)){
				layer.msg("请输入红包金额")
				return false;
			}
			if(checkIsEmpty(rate)){
				layer.msg("请输入中奖概率")
				return false;
			}
			if(checkRate(money)){
				var list = money.split(".");
				if(list.length>1 && list[1].length > 2){
					layer.msg("只能输入两位小数");
					return false;
				}
			}
			if(checkRate(rate)){
				var list = rate.split(".");
				if(list.length>1 && list[1].length > 2){
					layer.msg("中奖概率只能输入两位小数");
					return false;
				}
			}
			if(rate*1 > 100 || rate*1 < 0){
				layer.msg("中奖概率不为0,且不大于100%");
				return false;
			}
			if(money*1 < 1){
				layer.msg("红包金额最小为1元");
				return false;
			}
			if(money*1 > 4999){
				layer.msg("中奖红包金额最大为4999元");
				return false;
			}
			count = count*1 + rate*1;
		}
		if(count > 100){
			layer.msg("中奖概率不能超过100%")
			return false;
		}
		return true;
		
	}
	
	function checkInput1(){		//$("updateInfo input[name='money']")
		var length = $("#updateInfo input[name='money']").length;
		var count = 0;
		for(var i=0;i<length;i++){
			var money = $("#updateInfo input[name='money']")[i].value;
			var rate = $("#updateInfo input[name='rate']")[i].value;
			if(checkIsEmpty(money)){
				layer.msg("请输入红包金额")
				return false;
			}
			if(checkIsEmpty(rate)){
				layer.msg("请输入中奖概率")
				return false;
			}
			if(checkRate(money)){
				var list = money.split(".");
				if(list.length>1 && list[1].length > 2){
					layer.msg("中奖金额只能输入两位小数");
					return false;
				}
			}
			if(checkRate(rate)){
				var list = rate.split(".");
				if(list.length>1 && list[1].length > 2){
					layer.msg("中奖概率只能输入两位小数");
					return false;
				}
			}
			if(rate*1 > 100 || rate*1 < 0){
				layer.msg("中奖概率不为0,且不大于100%");
				return false;
			}
			if(money*1 < 1){
				layer.msg("红包金额最小为1元");
				return false;
			}
			if(money*1 > 4999){
				layer.msg("中奖红包金额最大为4999元");
				return false;
			}
			count = count*1 + rate*1;
		}
		if(count > 100){
			layer.msg("中奖概率不能超过100%")
			return false;
		}
		return true;
		
	}
	
	function delRow(nowTr){
		 $(nowTr).parent().parent().remove(); 
	}
	</script>
</body>
</html>
